<template>
  <div class="kaban">
    <!-- style="display: none;" -->
    <div ref="kaban" class="kabanEcharts" style="display: none;"></div>
    <img src="../../../../static/img/kaban.gif" style="" />

    <div class="listWrap">
      <div class="listTit">
        <span>车牌号</span>
        <span>启运地</span>
        <span>到站地</span>
        <span>运输状态</span>
      </div>
      <div class="swiper-container swiper-container2 listCon">
        <div class="swiper-wrapper">
          <div class="swiper-slide list">
            <span>沪BP8822</span>
            <span>华东</span>
            <span>中亚</span>
            <span>在途</span>
          </div>
          <div class="swiper-slide list">
            <span>鄂F28070</span>
            <span>华中</span>
            <span>欧洲</span>
            <span>在途</span>
          </div>
          <div class="swiper-slide list">
            <span>粤D35886</span>
            <span>华南</span>
            <span>欧洲</span>
            <span>在途</span>
          </div>
          <div class="swiper-slide list">
            <span>沪BP8822</span>
            <span>华东</span>
            <span>中亚</span>
            <span>在途</span>
          </div>
          <div class="swiper-slide list">
            <span>鄂F28070</span>
            <span>华中</span>
            <span>欧洲</span>
            <span>在途</span>
          </div>
          <div class="swiper-slide list">
            <span>粤D35886</span>
            <span>华南</span>
            <span>欧洲</span>
            <span>在途</span>
          </div>

        </div>
      </div>
      <div class="listBtn" @click="showList">
        <span>&lt;&lt;&lt;</span>
        <span>更多</span>
        <span>&gt;&gt;&gt;</span>
      </div>

    </div>
    <div v-if="listTckShow" class="listTckWrap">
      <div class="listTckTit">当日卡班运力详情</div>
      <img class="listTckGb" src="../../../../static/img/guanbi.png" @click="hideList"/>
      <div class="listTckCon">
        <div class="listTckConTit">
          <span class="width10">车牌号</span>
          <!-- <span>航司</span> -->
          <span>起始地</span>
          <span>目的地</span>
          <span class="width13">（计划）出发时间</span>
          <span class="width13">（计划）到达时间</span>
          <span>当前城市</span>
          <span>是否延误</span>
          <span class="width13">预计到达时间</span>
        </div>
        <div class="listTckConTxt">
          <div class="listTckConTxtList listTckConTxtListbg">
            <span class="width10">豫AYH830</span>
            <!-- <span>SC</span> -->
            <span>郑州</span>
            <span>列日</span>
            <span class="width13">2021-3-20 11:30</span>
            <span class="width13">2021-4-5 1:30</span>
            <span>基辅</span>
            <span>否</span>
            <span class="width13">2021-4-5 1:30</span>
          </div>
          <div class="listTckConTxtList listTckConTxtListbg">
            <span class="width10">豫A935OP</span>
            <!-- <span>SC</span> -->
            <span>郑州</span>
            <span>列日</span>
            <span class="width13">2021-3-18 17:30</span>
            <span class="width13">2021-4-3 22:10</span>
            <span>兰州</span>
            <span>否</span>
            <span class="width13">2021-4-3 22:10</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">陕A97R7H</span>
            <!-- <span>SC</span> -->
            <span>西安</span>
            <span>列日</span>
            <span class="width13">2021-3-16 16:30</span>
            <span class="width13">2021-4-1 23:50</span>
            <span>卢森堡</span>
            <span>否</span>
            <span class="width13">2021-4-1 23:50</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">兰A93LI2</span>
            <!-- <span>SC</span> -->
            <span>兰州</span>
            <span>杜尚别</span>
            <span class="width13">2021-3-21 16:30</span>
            <span class="width13">2021-4-1 21:26</span>
            <span>兰州</span>
            <span>否</span>
            <span class="width13">2021-4-1 21:26</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">桂A86LT5</span>
            <!-- <span>SC</span> -->
            <span>南宁</span>
            <span>列日</span>
            <span class="width13">2021-3-16 12:30</span>
            <span class="width13">2021-4-1 6:30</span>
            <span>南宁</span>
            <span>否</span>
            <span class="width13">2021-4-1 6:30</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">桂A35886</span>
            <!-- <span>SC</span> -->
            <span>南宁</span>
            <span>列日</span>
            <span class="width13">2021-3-6 9:30</span>
            <span class="width13">2021-4-1 0:30</span>
            <span>南宁</span>
            <span>否</span>
            <span class="width13">2021-4-1 0:30</span>
          </div>


          <div class="listTckConTxtList">
            <span class="width10">兰A9Y8I2</span>
            <!-- <span>SC</span> -->
            <span>兰州</span>
            <span>列日</span>
            <span class="width13">2021-3-19 21:30</span>
            <span class="width13">2021-3-30 19:10</span>
            <span>列日</span>
            <span>否</span>
            <span class="width13">2021-3-30 19:10</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">浙GK82F9</span>
            <!-- <span>SC</span> -->
            <span>义乌</span>
            <span>列日</span>
            <span class="width13">2021-3-16 13:30	</span>
            <span class="width13">2021-3-30 15:45	</span>
            <span>乌鲁木齐</span>
            <span>否</span>
            <span class="width13">2021-3-30 15:45	</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">浙A967HK	</span>
            <!-- <span>SC</span> -->
            <span>义乌	</span>
            <span>列日</span>
            <span class="width13">2021-3-14 8:30	</span>
            <span class="width13">2021-3-28 16:30	</span>
            <span>	列日</span>
            <span>否</span>
            <span class="width13">2021-3-28 16:30</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">浙AIU982	</span>
            <!-- <span>SC</span> -->
            <span>杭州</span>
            <span>列日</span>
            <span class="width13">2021-3-14 9:30</span>
            <span class="width13">2021-3-28 11:30	</span>
            <span>	阿拉山口</span>
            <span>否</span>
            <span class="width13">2021-3-28 11:30</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">川A93JL5	</span>
            <!-- <span>SC</span> -->
            <span>成都	</span>
            <span>杜尚别</span>
            <span class="width13">2021-3-15 19:30		</span>
            <span class="width13">2021-3-28 3:30	</span>
            <span>	成都</span>
            <span>否</span>
            <span class="width13">2021-3-28 3:30</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10"> 桂A35886</span>
            <!-- <span>SC</span> -->
            <span>南宁	</span>
            <span>列日</span>
            <span class="width13">2021-3/5 10:30	</span>
            <span class="width13">2021-3-26 19:15	</span>
            <span>	基辅</span>
            <span>否</span>
            <span class="width13">2021-3-26 19:15</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">沪BDF828	</span>
            <!-- <span>SC</span> -->
            <span>上海	</span>
            <span>杜尚别</span>
            <span class="width13">2021-3-11 8:30	</span>
            <span class="width13">2021-3-25 12:10	</span>
            <span>	兰州</span>
            <span>否</span>
            <span class="width13">2021-3-25 12:10</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10"> 川A28JK0</span>
            <!-- <span>SC</span> -->
            <span>	成都	</span>
            <span>列日</span>
            <span class="width13">2021-3-8 11:30	</span>
            <span class="width13">2021-3-25 2:30</span>
            <span>	卢森堡</span>
            <span>否</span>
            <span class="width13">2021-3-25 2:30</span>
          </div>
          <div class="listTckConTxtList">
            <span class="width10">沪BDF828	</span>
            <!-- <span>SC</span> -->
            <span>上海	</span>
            <span>杜尚别</span>
            <span class="width13">2021-3-13 13:30	</span>
            <span class="width13">2021-3-24 8:30	</span>
            <span>	比什凯克</span>
            <span>否</span>
            <span class="width13">2021-3-24 8:30</span>
          </div>

          <div class="listTckConTxtList">
            <span class="width10">沪BDF828	</span>
            <!-- <span>SC</span> -->
            <span>上海	</span>
            <span>杜尚别</span>
            <span class="width13">2021-3-9 12:30	</span>
            <span class="width13">2021-3-23 19:30	</span>
            <span>	上海</span>
            <span>否</span>
            <span class="width13">2021-3-23 19:30</span>
          </div>

          <div class="listTckConTxtList">
            <span class="width10">沪BP8822	</span>
            <!-- <span>SC</span> -->
            <span>上海	</span>
            <span>杜尚别</span>
            <span class="width13">2021-3-10 19:30	</span>
            <span class="width13">2021-3-21 22:30	</span>
            <span>	阿拉山口</span>
            <span>否</span>
            <span class="width13">2021-3-21 22:30	</span>
          </div>






        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'kaban',
    components: {

    },
    data() {
      return {
listTckShow:false,
      }
    },
    mounted() {
      let swiper = new Swiper('.swiper-container2', {
        direction: 'vertical',
        slidesPerView:3,
        //循环播放
        loop: true,
        // 自动播放时间
        autoplay: true,
        // 播放的速度
        speed: 1000,
      });
      this.getEchartData()
    },
    methods: {
      showList(){
        this.listTckShow=true
      },
      hideList(){
        this.listTckShow=false
      },
      getEchartData() {
        const kaban = this.$refs.kaban;
        if (kaban) {
          const myChart = this.$echarts.init(kaban)
          var that = this;

          let list = [{
            name: '卡班',
            value: 17
          }, {
            name: '在途',
            value: 12
          }, {
            name: '集货中',
            value: 3
          }, {
            name: '装卸',
            value: 2
          }];
          let yName = list.map((item) => item.name);
          let xData = list.map((item) => item.value);
          let barWidth = 18;

          var option = {
            // backgroundColor: 'balck',
            xAxis: {
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },

            },
            grid: {
              containLabel: true,
              left: that.commonFunction.fontSize(0.1),
              top: 0,
              right: that.commonFunction.fontSize(0.5),
              bottom: 0
            },
            yAxis: [{
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                  color: '#34e8fa'
                }
              },
              data: yName,
            }],
            series: [{ //内
                type: 'bar',
                barWidth,
                legendHoverLink: false,
                symbolRepeat: true,
                silent: true,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0,
                      color: '#34e8fa' // 0% 处的颜色
                    }, {
                      offset: .8,
                      color: '#f4da8d' // 100% 处的颜色
                    }]
                  }
                },
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  distance: 10,
                  textStyle: { //数值样式
                    color: '#f4da8d',
                    fontSize: 14,
                  }
                },
                data: list,
                z: 1,
                animationEasing: 'elasticOut'
              },
              { // 背景
                type: 'pictorialBar',
                animationDuration: 0,
                symbolRepeat: 'fixed',
                symbolMargin: '20%',
                symbol: 'roundRect',
                symbolSize: [6, barWidth],
                itemStyle: {
                  normal: {
                    color: 'transparent',

                  }
                },
                // label: {
                //     normal: {
                //         show: false,
                //         position: 'right',
                //         offset: [0, 2],
                //         distance: 0,
                //         textStyle: {
                //             color: '#f4da8d',
                //             fontSize: 14,
                //         },
                //         formatter: function(a, b) {
                //             return `${a.value}`
                //         }
                //     },

                // },
                data: xData,
                z: 0,
                animationEasing: 'elasticOut'
              },
              { //分隔
                type: 'pictorialBar',
                itemStyle: {
                  color: '#070335'
                },
                symbolRepeat: 'fixed',
                symbolMargin: 2,
                symbol: 'roundRect',
                symbolClip: true,
                symbolSize: [2, barWidth],
                symbolPosition: 'start',
                symbolOffset: [0, 0],
                data: list,
                z: 2,
                animationEasing: 'elasticOut'
              }
            ]
          };


          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      },
    }
  }
</script>

<style scoped>
  .kaban {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .kabanEcharts {
    width: 52%;
    height: 100%;
  }

  .listWrap {
    width: 48%;
    height: 80%;
    background-image: url(../../../../static/img/zuoshangjiao.png), url(../../../../static/img/youshangjiao.png), url(../../../../static/img/youxiajiao.png), url(../../../../static/img/zuoxiajiao.png);
    background-color: rgba(11, 50, 130, .6);
    background-position: left top, right top, right bottom, left bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    /* border: 1px solid #6b85c0; */
    padding: .1rem .15rem;
    box-sizing: border-box;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;

  }

  .listTit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: .3rem;
    position: relative;
  }

  .listTit::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 95%;
    background: #4ac5d9;
    bottom: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .listTit>span {
    font-size: .1rem;
    /* color: #4077aa; */
    color: #fff;
    text-align: center;
    width: 24.5%;
    text-align: center;
  }

  .listTit>span:nth-last-of-type(1) {
    width: 26.5%;
  }


  .listCon {
    width: 100%;
    height: 70%;
    overflow: hidden;
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* height: .3rem; */
  }

  .list>span {
    font-size: .1rem;
    /* color: #4077aa; */
    color: #fff;
    text-align: center;
    width: 25%;
    text-align: center;
    line-height: .16rem;
  }
  .listBtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: .12rem;
    color: #04d7ea;
    margin: 0 auto;
    flex: 1;
    cursor: pointer;
  }
  .listTckWrap{
    width: 140%;
    height: 100%;
    background: url(../../../../static/img/tanchuang.png) no-repeat;
    background-size: 100% 100%;
    z-index: 12;
    position: absolute;
    left: 0;
    top:-.16rem;
  }
  .listTckGb{
    position: absolute;
    right: 0;
    top: .3rem;
    cursor: pointer;
  }
  .listTckTit{
    line-height: .34rem;
    font-size: .18rem;
    color: #fff;
    text-align: center;
    width: 100%;
    letter-spacing: 1px;

  }
  .listTckCon{
    padding:.16rem;
    /* display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
    margin-top: .08rem;
    width: 100%;
    height: 100%;
  }
   .listTckConTit{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     height: .3rem;
     background: rgba(2,112,147,.6);
   }
   .listTckConTit>span{
     width:8.19%;
     color: #fff;
     font-size: .12rem;
     text-align: center;
   }
   .listTckConTit>span.width10{
     width: 16.19%;
   }
   .listTckConTit>span.width13{
     width: 17%;
   }
   .listTckConTxt{
     width: 100%;
     height: 55%;
     /* flex: 1; */
     overflow: auto;
   }
   .listTckConTxtList{
     width: 100%;
     height: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
   }
   .listTckConTxtListbg{
     background: rgba(1, 63, 104, .8);
   }

    .listTckConTxtList:hover{
      background: rgba(1,63,104,.8);
    }
   .listTckConTxtList>span{
     width: 8.19%;
     color: #fff;
     font-size: .12rem;
     text-align: center;
   }
   .listTckConTxtList>span.width10{
     width: 16.19%;
   }
   .listTckConTxtList>span.width13{
     width: 17%;
   }
</style>
